<template>
  <div id="discovery">
    <!-- 标题 -->
    <div>
      <mt-header fixed>
        <mt-switch class="header-switch" slot="left" v-model="value1" @change="change" fixed>{{textChang}}</mt-switch>
        <mt-button icon="发表" slot="right" @click="openAddMessage">发表</mt-button>
      </mt-header>
    </div>
  
    <!-- 项目组 -->
    <div>
      <mt-tab-container-item>
        <!--全部活动-->
        <div v-if="display">
          <div id="more">
            <mt-cell v-for="item in list" :title="item.title">
              <mt-button size="small" @click="showDetail(item._id)">详情</mt-button>
          </div>
          </mt-cell>
  
        </div>
        <div v-else="display">
          <!--我报名的活动-->
          <div v-for="item in mylist" class="media-1-3">
  
            <mt-header :title="item.title" id="cell_1">
              <!--传送join中的文章的id-->
              <mt-button slot="right" @click="showDetail(item._id)">详细</mt-button>
            </mt-header>
  
            <div id="item_time">
              {{item.created_at}}
            </div>
            <div id="item_poster">
              发布者：{{item.poster}}
            </div>
          </div>
        </div>
      </mt-tab-container-item>
    </div>
  
    <!-- 测试表单 -->
    <mt-popup class="popup-WH" v-model="addMessageModal" position="right">
     
  
  </div>
</template>

<script>
import Vue from 'vue'
// import store from '../vuex/store'
import axios from 'axios'
import {
  mapActions
} from "vuex";

export default {
  name: 'discovery',
  data() {
    return {
      mylist: [],
      popupVisible: false,
      active: 'tab-container1',
      value1: false,
      textChang: "旅游",
      display: true,
      list: [],
      title: '',
      poster: sessionStorage.getItem("username"),
      rating: null,
      introduction: '',
      message_id: '',
      addMessageModal: false,
      editMessageModal: false,
      username: sessionStorage.getItem("username"),
      images: [],
     Visible_1: false,
      txt: false,
      imgURL: '',
      loadingData: true,
      form_see: false,
      currentDate: new Date(),
      food:"美食",
      travel:"旅游"
    }
  },
  created() {
    // this.$store.dispatch({
    //   type: 'getMessage',
    //   callback: (result) => {
    //     this.list = result.data;
    //   }
    // });
    this.gettravel();
    this.getuserjoin();
  },
  methods: {
    change(value1) {
      if (value1 == false) {
        this.textChang = "旅游",
          this.display = true
      } else {
        this.textChang = "美食",
          this.display = false
      }
    },
    //添加信息
    addMge() {
      this.$store.dispatch({
        type: 'addMessage',
      })
        .then(() => {
          this.updateMessage();
          this.closeAddMessageModal();
        })
    },
    //打开添加信息模块
    openAddMessageModal() {
      this.addMessageModal = true
    },
    //关闭添加信息模块
    closeAddMessageModal() {
      this.title = ''
      this.rating = null
      this.poster = ''
      this.introduction = ''
      this.addMessageModal = false
    },
    //添加的信息时候，监听数据变化，并传到store的的actions中，
    // 通过actons中的adds方法调用mutations最后实现改变state中数据
    addschange() {
      this.$store.dispatch("adds", {
        title: this.title,
        poster: this.poster,
        introduction: this.introduction,
        rating: this.rating,
      })

    },
    // 跳转到信息的详情方法（跳转路由）
    showDetail(_id) {
      this.$router.push(`/item/${_id}`)
    },
    // 添加信息成功后调用一次，相当于刷新数据
    // updateMessage() {
    //   this.$store.dispatch({
    //     type: 'getMessage',
    //     callback: (result) => {
    //       this.list = result.data;
    //     }
    //   })
    // }
    // 获取旅游板块文章
    gettravel(){
      var messagetype=encodeURI(this.travel)
      axios.get(`/api/messagess/${messagetype}`)
      .then(res=>{
        this.list=res.data
      })
      .catch(err=>{
        console.log(err)
      })
    },
    // 获取美食类型文章
    getuserjoin() {
     var messagetype = encodeURI(this.food)
     
      axios.get(`/api/messagess/${messagetype}`)
        .then(res => {
          this.mylist = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 信息更新
    updateMessage_ok() {
      this.popupVisible = true;
    },
  openAddMessage(){
    this.$router.push({path:'/Addmessage'})
  }
   
  },
  watch: {
    title: function () {
      this.addschange()
    },
    poster: function () {
      this.addschange()
    },
    introduction: function () {
      this.addschange()
    },
    rating: function () {
      this.addschange()
    },
    imgURL: function () {
      this.rating = this.imgURL
    }
  },
  // 将后端返回的图片地址从store中的state中分发到这里
  computed: {
    imgURL() {
      return this.$store.state.imgURL
    }
  },

}
</script>


<style>
.header {
  background-color: gray;
}


.mint-switch-input:checked+.mint-switch-core {
  border-color: white;
  background-color: white;
}

.popup-WH {
  width: 100%;
  height: 100%;
}

#more {
  margin-top: 45px;
}

#txt_check {
    margin-top: 10px;
    background-color: transparent !important;
    border: 0px solid black !important;
    width: 100%;
    margin-bottom: 0px;
}

.form_plus_message {

    height: 40px;
    width: 100%;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: white;
    border-radius: 10px 10px;
    margin-bottom: 10px;
}

.form_plus_message_textarea {
    background-color: white;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px 10px;
    margin-bottom: 20px;
}

#box_card_form {
    background-color: rgba(230, 230, 230, 0.5);
}

#box_form {
    margin-top: 10px;
}

.From_btn {
    width: 70px;
    height: 20px;
    font-size: 13px;
    border-radius: 40px 40px;
}

.mint-popup-top {
    background-color: transparent;
}

.imgDisplayStyle {
    width: 100%;
    /*height: 50%*/
}

#imgDisplayStyle_btn {
    margin-top: 20px;
    margin-bottom: 10px;
}

#green_btn {
    margin-left: 45%;
}

.unDisplay_uploadBUtton {
    display: none !important;
}

.popupV {
    background-color: transparent;
    color: rgba(255, 255, 255, 1);
}
</style>
